<template>
  <view class="fill-width-height" @click="showRewardAd">
    <slot></slot>
  </view>
</template>

<script>
import { getAdUnitIdConfig } from '@/api/common/common'
export default {
  props: {
  },
  data() {
    return {
	  // 激励视频广告实例
      rewardAd: null, 
      adUnitId: null
    };
  },
  watch: {
	  
  },
  methods: {
    // 初始化激励视频广告
    async initRewardAd() {
	  const configData = await getAdUnitIdConfig().then(res => res.data)
	  const adUnitId = configData?.adUnitId || this.$config.adUnitId
	  this.adUnitId = adUnitId
	  if(this.adUnitId?.length === 0){
		  return console.log('未配置广告位id');
	  }
	  console.log('配置广告位id: ',this.adUnitId)
      if (uni.getSystemInfoSync().platform === 'devtools') {
        console.log('开发工具上无法展示广告');
        return;
      }
      // 创建激励视频广告实例
      this.rewardAd = uni.createRewardedVideoAd({
        adUnitId: this.adUnitId
      });

      // 监听广告加载成功事件
      this.rewardAd.onLoad(() => {
        console.log('激励视频广告加载成功');
      });

      // 监听广告加载失败事件
      this.rewardAd.onError((err) => {
        console.log('激励视频广告加载失败', err);
		this.$emit('adLoadError', err);
      });

      // 监听广告关闭事件
      this.rewardAd.onClose((res) => {
        if (res && res.isEnded) {
          // 用户完整观看了广告，给予奖励
          console.log('用户完整观看了广告，给予奖励');
		  this.$emit('adCompleted');
        } else {
          // 用户未完整观看广告，不给予奖励
          console.log('用户未完整观看广告，不给予奖励');
		  this.$emit('adNotCompleted');
        }
      });
    },
	showToast(message){
		uni.showToast({
			title: message,
			mask: true,
			icon: 'none'
		})
	},
    // 展示激励视频广告
    showRewardAd() {
		if (uni.getSystemInfoSync().platform === 'devtools') {
		  console.log('开发工具上无法展示广告');
		  return this.$emit('adCompleted');
		}
		if(this.adUnitId?.length === 0){
			console.log('未配置广告位id,不启用广告');
			return this.$emit('adCompleted');
		}
		if (this.rewardAd) {
			this.showToast('请先看完广告哟！')
			this.rewardAd.show().catch((err) => {
			  console.log('激励视频广告展示失败，尝试重新加载', err);
			  this.showToast('激励视频广告展示失败，尝试重新加载!')
			  
			  // 展示失败时，尝试重新加载广告
			  this.rewardAd.load().then(() => {
				this.rewardAd.show();
			  }).catch((loadErr) => {
				console.log('激励视频广告重新加载失败', loadErr);
				this.$emit('adReloadError', loadErr);
				this.showToast('激励视频广告重新加载失败!')
			  });
			});
      }
    }
  },
  mounted(){
	  this.initRewardAd()
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}
button {
  margin-top: 20px;
}
</style>